<template>
  <el-dialog
    v-model="visible"
    title="许可证详情"
    width="90%"
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <div v-if="permitData" class="permit-detail">
      <!-- 基本信息 -->
      <el-card class="detail-section">
        <template #header>
          <div class="section-title">
            <el-icon><Document /></el-icon>
            <span>基本信息</span>
          </div>
        </template>
        
        <el-descriptions :column="3" border>
          <el-descriptions-item label="许可证号">{{ permitData.permitNumber }}</el-descriptions-item>
          <el-descriptions-item label="工作类型">{{ getWorkTypeLabel(permitData.workType) }}</el-descriptions-item>
          <el-descriptions-item label="申请人">{{ permitData.applicant }}</el-descriptions-item>
          <el-descriptions-item label="申请时间">{{ permitData.applyTime }}</el-descriptions-item>
          <el-descriptions-item label="工作位置">{{ permitData.workLocation }}</el-descriptions-item>
          <el-descriptions-item label="紧急程度">
            <el-tag :type="getUrgencyTagType(permitData.urgency)">
              {{ getUrgencyText(permitData.urgency) }}
            </el-tag>
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
      
      <!-- JSA信息 -->
      <el-card v-if="permitData.jsaInfo" class="detail-section">
        <template #header>
          <div class="section-title">
            <el-icon><List /></el-icon>
            <span>JSA信息</span>
          </div>
        </template>
        
        <el-descriptions :column="2" border>
          <el-descriptions-item label="JSA编号">{{ permitData.jsaInfo.jsaNumber }}</el-descriptions-item>
          <el-descriptions-item label="分析单位">{{ permitData.jsaInfo.analysisUnit }}</el-descriptions-item>
          <el-descriptions-item label="任务描述" :span="2">{{ permitData.jsaInfo.jobDescription }}</el-descriptions-item>
        </el-descriptions>
      </el-card>
      
      <!-- 措施落实责任人 -->
      <el-card v-if="stepResponsibilities.length > 0" class="detail-section">
        <template #header>
          <div class="section-title">
            <el-icon><User /></el-icon>
            <span>措施落实责任人</span>
          </div>
        </template>
        
        <div class="responsibility-list">
          <div 
            v-for="(item, index) in stepResponsibilities" 
            :key="index"
            class="responsibility-item"
          >
            <div class="step-info">
              <div class="step-number">{{ index + 1 }}</div>
              <div class="step-name">{{ item.stepName }}</div>
            </div>
            <div class="responsible-persons">
              <el-tag
                v-for="personId in item.responsiblePersons || []"
                :key="personId"
                style="margin: 2px 4px 2px 0"
              >
                {{ getPersonName(personId) }}
              </el-tag>
              <span v-if="!item.responsiblePersons || item.responsiblePersons.length === 0" class="no-responsible">
                未指定责任人
              </span>
            </div>
          </div>
        </div>
      </el-card>
      
      <!-- 确认状态 -->
      <el-card class="detail-section">
        <template #header>
          <div class="section-title">
            <el-icon><Check /></el-icon>
            <span>确认状态</span>
          </div>
        </template>
        
        <div class="confirmation-status">
          <div 
            v-for="(item, index) in confirmationStatus" 
            :key="index"
            class="confirmation-item"
          >
            <div class="person-info">
              <div class="person-name">{{ item.personName }}</div>
              <div class="person-role">{{ item.role }}</div>
            </div>
            <div class="confirmation-info">
              <el-tag 
                :type="item.status === 'confirmed' ? 'success' : item.status === 'pending' ? 'warning' : 'info'"
                :icon="item.status === 'confirmed' ? 'Check' : item.status === 'pending' ? 'Clock' : 'Close'"
              >
                {{ getStatusLabel(item.status) }}
              </el-tag>
              <div class="confirmation-time">
                {{ item.confirmTime || '未确认' }}
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>
    
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { Document, List, User, Check, Clock, Close } from '@element-plus/icons-vue'

interface PermitData {
  permitNumber: string
  workType: string
  applicant: string
  applyTime: string
  workLocation: string
  urgency: string
  jsaInfo?: {
    jsaNumber: string
    analysisUnit: string
    jobDescription: string
  }
  stepResponsibilities?: Array<{
    stepName: string
    responsiblePersons?: string[]
  }>
}

interface Props {
  modelValue: boolean
  permitData?: PermitData
}

interface Emits {
  (e: 'update:modelValue', value: boolean): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const visible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

// 人员选项数据
const personnelOptions = [
  { id: '1', name: '张三', department: '安全部' },
  { id: '2', name: '李四', department: '工程部' },
  { id: '3', name: '王五', department: '技术部' },
  { id: '4', name: '赵六', department: '质量部' },
  { id: '5', name: '钱七', department: '安全部' },
  { id: '6', name: '孙八', department: '工程部' },
  { id: '7', name: '周九', department: '技术部' },
  { id: '8', name: '吴十', department: '质量部' }
]

// 获取人员名称
const getPersonName = (personId: string) => {
  const person = personnelOptions.find(p => p.id === personId)
  return person ? `${person.name} (${person.department})` : personId
}

// 获取工作类型标签
const getWorkTypeLabel = (workType: string) => {
  const labels: Record<string, string> = {
    high_altitude: '高空作业',
    hot_work: '动火作业',
    electrical: '电气作业',
    confined_space: '受限空间'
  }
  return labels[workType] || workType
}

// 获取紧急程度标签类型
const getUrgencyTagType = (urgency: string) => {
  const types: Record<string, string> = {
    low: '',
    medium: 'warning',
    high: 'danger'
  }
  return types[urgency] || ''
}

// 获取紧急程度文本
const getUrgencyText = (urgency: string) => {
  const texts: Record<string, string> = {
    low: '低',
    medium: '中',
    high: '高'
  }
  return texts[urgency] || urgency
}

// 获取状态标签
const getStatusLabel = (status: string) => {
  const labels: Record<string, string> = {
    confirmed: '已确认',
    pending: '待确认',
    rejected: '已拒绝'
  }
  return labels[status] || '未知状态'
}

// 步骤责任人数据
const stepResponsibilities = computed(() => {
  return props.permitData?.stepResponsibilities || []
})

// 确认状态数据
const confirmationStatus = computed(() => {
  if (!props.permitData) return []
  
  const statusData = [
    // 申请人确认状态
    { personName: props.permitData.applicant, role: '申请人', status: 'confirmed', confirmTime: '2024-01-15 09:00:00' },
    // 安全员确认状态
    { personName: '王五 (安全部)', role: '安全员', status: 'confirmed', confirmTime: '2024-01-15 10:30:00' },
    // 主管确认状态
    { personName: '赵六 (质量部)', role: '主管', status: 'pending', confirmTime: null },
    // 措施责任人确认状态
    { personName: '张三 (安全部)', role: '措施责任人', status: 'confirmed', confirmTime: '2024-01-15 11:15:00' },
    { personName: '李四 (工程部)', role: '措施责任人', status: 'pending', confirmTime: null }
  ]
  
  return statusData
})

const handleClose = () => {
  visible.value = false
}
</script>

<style lang="scss" scoped>
.permit-detail {
  .detail-section {
    margin-bottom: 20px;
    
    .section-title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: 500;
    }
  }
  
  .responsibility-list {
    .responsibility-item {
      display: flex;
      align-items: center;
      margin-bottom: 16px;
      padding: 16px;
      background: #fafbfc;
      border-radius: 8px;
      border: 1px solid #e4e7ed;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .step-info {
        display: flex;
        align-items: center;
        min-width: 200px;
        margin-right: 20px;
        
        .step-number {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 24px;
          height: 24px;
          background: #409eff;
          color: white;
          border-radius: 50%;
          font-size: 12px;
          font-weight: 600;
          margin-right: 12px;
        }
        
        .step-name {
          font-weight: 500;
          color: #303133;
          flex: 1;
        }
      }
      
      .responsible-persons {
        flex: 1;
        
        .no-responsible {
          color: #909399;
          font-style: italic;
        }
      }
    }
  }
  
  .confirmation-status {
    .confirmation-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
      padding: 16px;
      background: #fafbfc;
      border-radius: 8px;
      border: 1px solid #e4e7ed;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .person-info {
        .person-name {
          font-weight: 500;
          color: #303133;
          margin-bottom: 4px;
        }
        
        .person-role {
          font-size: 12px;
          color: #606266;
        }
      }
      
      .confirmation-info {
        text-align: right;
        
        .confirmation-time {
          font-size: 12px;
          color: #909399;
          margin-top: 4px;
        }
      }
    }
  }
}

.dialog-footer {
  text-align: right;
}
</style>